<template>
	<view class="box1">
		<navbar :title="i18n.gg"></navbar>
		<view class="px15">
			<navigator class="py15 border2" :url="'./noticedetail??id=' + item.noticeId" v-for="(item, index) in list" :key="index">
				<view class="title f15 white">{{ item.noticeTitle }}</view>
				<view class="mt4 f12 textcolor">{{ item.createTime }}</view>
			</navigator>
		</view>
		
		<view v-if="list.length == 0 && !loadingMore" class="mt80">
			<image src="../../static/nodata.png" class="nodata"></image>
			<view class="text--center notxt mgt20">{{i18n.zwrhsj}}</view>
		</view>
		<view class="cu-load f12 color-info" :class="loadingMore ? 'loading' : 'over'" v-if="list.length > 8">{{ loadingMore ? i18n.jzz : i18n.mtgd }}</view>
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			status: 0,
			active: 2,
			totalPrice: 0,
			zlIndex: 0,
			page: 1,
			pageSize: 8
		};
	},
	computed:{
		i18n() {
			return this.$t('home');
		}
	},
	onLoad() {
		this.clearData();
		this.getList();
	},
	onReachBottom() {
		this.getList();
	},
	onShow() {},
	methods: {
		async getList() {
			 let { data } = await this.$http.post('notice.getNoticList', {pageNo:this.page,pageSize:10}, { isAuth: true, tipConfig: { isLoading: false } });
			this.finish = data.records.length < 10;
			!this.finish && (this.page += 1);
			this.list = [...this.list, ...data.records];
		},
		clearData() {
			this.page = 1;
			this.finish = false;
			this.list = [];
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #000;
}
body,
html {
	background-color: #000;
}
.box1 {
	.noticebox {
		border-radius: 12rpx;
		padding: 60rpx 30rpx 0rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: auto;
		margin-right: auto;
	}
	.title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.register {
	margin-top: 60rpx;
	.back {
		justify-content: center;
		align-items: center;
		display: flex;
		font-size: 34rpx;
		margin-left: 30rpx;
		position: relative;
		.leftarrow {
			position: absolute;
			left: 0;
			top: 0;
			width: 32rpx;
			height: 32rpx;
		}
	}
	.chrecord {
		position: absolute;
		top: 0;
		right: 0;
		margin-right: 30rpx;
		color:#586471;
	}
}
.textcolor{
	color:#586471;
}
</style>
